iT邦幫忙

2024 iThome 鐵人賽

DAY 9
0
自我挑戰組

UI/UX設計的初心者冒險之旅系列 第 9

DAY9#Figma的Auto layout功能認識

  • 分享至 

  • xImage
  •  

在之前第一次製作wireframe的時候有說到一個功能,叫做Auto layout,非常非常容易在使用Figma的過程會使用到。

那就,https://ithelp.ithome.com.tw/upload/images/20240820/20168599qAutfLP0YM.png


Auto layout

  Auto layout的快捷鍵是Shift+A,設定完後會出現它的功能面板:
https://ithelp.ithome.com.tw/upload/images/20240820/20168599gpngSG5Vrp.jpg
  看似幾個設定而已,實際上能做到的事情很多,以下用它能做的基本事項來分別敘述。

Hug與Fixed

  Hug和Fixed的差異在Day7那天有提到,除了固定物件與Frame的間距以外,若在Fixed模式下直接新增字數,就得重新設定Frame的寬高,而Hug則會隨之更動。
https://ithelp.ithome.com.tw/upload/images/20240820/20168599JOrGjUuqs3.jpg

排列方向與間距

  將多個物件框選在一起Auto layout,可以直接調整物件之間距離,或是直接點選排列方向的按鍵換方向。
https://ithelp.ithome.com.tw/upload/images/20240820/20168599eMy40XdNg0.jpg

內間距與對齊

  在Auto layout的設定下,可以設定物件與Frame之間的距離與位置,不論是位置設定在左上角或最右邊,Frame的大小變動都不會影響到物件的對齊。
https://ithelp.ithome.com.tw/upload/images/20240820/20168599ceiiXLOL8g.jpg

順序調整

  當每個圖層都是Auto layout的話,我們在調整物件順序的時候,就可以直接透過上下鍵變更順序,或是插入新選項。
https://ithelp.ithome.com.tw/upload/images/20240820/20168599OGRHoDPPuB.jpg

Spacing mode

  物件的距離如果希望它們均分,可以將物件間距的設定調整為Auto,或是將對齊的位置連點兩下變更。
https://ithelp.ithome.com.tw/upload/images/20240820/20168599TDAuG9gE2C.jpg

Fill container

  如果將圖片本身設定為Fill,長或寬也設定為Fill container,那麼在變動Frame的大小時,圖片也會隨之填滿物件範圍的長或寬。
https://ithelp.ithome.com.tw/upload/images/20240820/201685998EsiJRaR9v.jpg


一些廢話

其實我已經逐漸沒有依照ChatGPT的排程了,關於Figma的一些常用功能我覺得應該要特別筆記下來比較好

參考資料

  1. Figma 設計體驗營(中):Auto Layout / Components
  2. Figma Auto Layout 教學(上)
  3. Figma Auto Layout 教學(下)
  4. Figma 初心者攻略 #2:Auto Layout

上一篇
DAY8#Figma的基礎工具操作
下一篇
DAY10#Figma的Component功能認識
系列文
UI/UX設計的初心者冒險之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言